.note-plugin {
  position: relative;
  margin: 0 0 1rem;
  border: 1px solid var(--color-gray-250);
  border-left-width: .35rem;
  padding: 0 1rem;
  line-height: 1.7em;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
  }

  p {
    margin: 1em 0;
  }

  strong {
    font-size: $font-size-base + 6px;
  }

  &:not(.no-icon) {
    padding-left: 2rem;

    &::before {
      position: absolute;
      top: 1.5rem;
      left: .6rem;
      fontawesome-base();
      font-size: $font-size-base + 6px;
      transform: translateY(-50%);
    }

    &.default::before {
      content: $icon-note-default;
      color: var(--color-gray-650);
    }

    &.success::before {
      content: $icon-note-success;
      color: #42b983;
    }

    &.warning::before {
      content: $icon-note-warning;
      color: #e7c000;
    }

    &.danger::before {
      content: $icon-note-danger;
      color: #dc3b3b;
    }
  }

  &.default {
    border-left-color: var(--color-gray-650);

    strong {
      color: var(--color-gray-650);
    }
  }

  &.success {
    border-left-color: #42b983;

    strong {
      color: #42b983;
    }
  }

  &.warning {
    border-left-color: #e7c000;

    strong {
      color: #e7c000;
    }
  }

  &.danger {
    border-left-color: #dc3b3b;

    strong {
      color: #dc3b3b;
    }
  }
}
